<template>
  <div class="flex justify-center bg-background-900 min-h-screen">
    <!-- 加载状态 -->
    <LoadingSpinner v-if="isLoading" />

    <!-- 主要内容 -->
    <div v-else-if="movie" class="w-full flex flex-col">
      <!-- 基本信息横幅 -->
      <div class="relative w-full overflow-hidden min-h-[400px]">
        <!-- 背景横幅 -->
        <div
          style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #1e293b; min-height: 400px; z-index: 0;"
          :style="{
            backgroundImage: movie.coverUrl ? `url(${movie.coverUrl})` : 'none',
            filter: movie.coverUrl ? 'blur(0px) brightness(0.45)' : 'none',
            transform: movie.coverUrl ? 'scale(1.1)' : 'none',
          }"
        >
          <!-- 调试信息 -->
          <div
            v-if="!movie.coverUrl"
            style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.125rem;"
          >
            背景图片未加载: {{ movie.coverUrl }}
          </div>
        </div>

        <!-- 左右渐变遮罩（让文字区域更清晰） -->
        <div
          class="absolute inset-0 bg-gradient-to-r from-background-900/70 via-background-900/50 to-background-900/30 z-10"
        ></div>

        <!-- 下方渐变淡出到背景颜色 -->
        <div
          class="absolute inset-0 bg-gradient-to-b from-transparent via-background-900/30 to-background-900 z-10"
        ></div>

        <!-- 内容容器 -->
        <div class="relative max-w-6xl mx-auto p-4 my-8 z-20">
          <MovieBasicInfo v-if="movieForComponents" :movie="movieForComponents" />
        </div>
      </div>

      <!-- 详细信息 -->
      <div class="max-w-6xl w-full mx-auto p-4 relative z-30">
        <MovieInfo v-if="movieForComponents" :movie="movieForComponents" />

        <!-- 内容区域 -->
        <div class="flex gap-6 mt-6">
          <!-- 左侧内容区域 -->
          <div class="flex-1 flex flex-col gap-6">
            <!-- 评论区 -->
            <CommentSection :movie-id="parseInt(route.params.id as string)" />
          </div>

          <!-- 右侧推荐栏 -->
          <div class="hidden xl:block w-80 flex-shrink-0">
            <RecommendSidebar :movies="relatedMoviesForComponents" :is-loading="isLoading" />
          </div>
        </div>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="!isLoading" class="flex items-center justify-center w-full h-64">
      <div class="text-center">
        <div class="text-text-secondary text-lg mb-2">电影不存在或已被删除</div>
        <UiButton @click="$router.push('/')" variant="primary">
          返回首页
        </UiButton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useMovieDetail } from '../composables/movies'
import { LoadingSpinner, UiButton } from '../components/ui'
import MovieBasicInfo from '../components/movie/MovieBasicInfo.vue'
import MovieInfo from '../components/movie/MovieInfo.vue'
import CommentSection from '../components/movie/CommentSection.vue'
import RecommendSidebar from '../components/movie/RecommendSidebar.vue'

const route = useRoute()
const { isLoading, movie, relatedMovies, loadMovieDetail, loadRelatedMovies } = useMovieDetail()

const movieForComponents = computed(() => {
  if (!movie.value) return null
  return { ...movie.value }
})

const relatedMoviesForComponents = computed(() => {
  return relatedMovies.value.map(m => ({ ...m }))
})

const loadMovieData = async (movieId: number) => {
  try {
    await Promise.all([loadMovieDetail(movieId), loadRelatedMovies(movieId)])
    const mainContent = document.querySelector('main')
    if (mainContent) {
      mainContent.scrollTop = 0
    } else {
      window.scrollTo(0, 0)
    }
  } catch (error) {
    console.error('Failed to load movie details:', error)
  }
}

watch(
  () => route.params.id,
  (newId, oldId) => {
    const movieId = parseInt(newId as string)
    if (!isNaN(movieId)) {
      loadMovieData(movieId)
    }
  },
  { immediate: true }
)

onMounted(async () => {
  const movieId = parseInt(route.params.id as string)
  if (!isNaN(movieId)) {
    await loadMovieData(movieId)
  }
})
</script>
